<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <v-app id="app">
    <v-app-bar color="transparent" elevation="0" app class="py-4">
      <v-icon class="mb-6" @click.stop="drawerMenuClick" v-if="screenIsSmall"
      >$menu</v-icon
      >
      <v-row justify="space-between" v-if="!screenIsSmall">
        <v-toolbar-title class="text-uppercase ">
<!--          <span class="font-weight-light">AAE</span>-->
<!--          <span>IdeaPro</span>-->
        </v-toolbar-title>

        <v-col md="2" cols="12">
          <v-badge
              bottom
              color="success"
              overlap
              offset-x="12"
              offset-y="12"
              class="ms-4"
              dot
          >
            <v-avatar
                size="40px"
            >
              <v-img :src="avatar"></v-img>
            </v-avatar>
          </v-badge>

          <v-btn text @click="logout">
            <span>退出</span>
            <v-icon right>exit_to_app</v-icon>
          </v-btn>
<!--          搜索框  <search-box />-->
        </v-col>
      </v-row>
    </v-app-bar>
    <v-navigation-drawer
        width="230"
        v-model="drawer"
        color="black"
        app
        :mini-variant="miniDrawer"
    >
      <v-list>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon size="35" v-if="!miniDrawer">$spotify</v-icon>
<!--            <svg-icon  v-if="!miniDrawer" :icon-class="appIcon" color="green"></svg-icon>-->
            <v-icon size="20" class="mr-2" v-else @click.stop="drawerMenuClick"
            >$menu</v-icon
            >
          </v-list-item-avatar>
          <v-list-item-title class="font-black">{{appName}}大数据</v-list-item-title>
          <v-list-item-action>
            <v-icon @click.stop="drawerMenuClick">$menu</v-icon>
          </v-list-item-action>
        </v-list-item>
      </v-list>
      <v-divider inset class="mx-auto"></v-divider>
      <v-list nav color="transparent" flat class="mt-3">
        <v-list-item
            v-for="(navItem, index) in navItems"
            :key="index"
            class="pr-6"
            link
            exact
            :to="navItem.link"
            exact-active-class="active-nav-link"
        >
          <v-tooltip nudge-right="8" right :z-index="miniDrawer ? 900000 : -5">
            <template v-slot:activator="{ on, attrs }">
              <v-icon v-bind="attrs" v-on="on" class="mr-6">{{
                  navItem.icon
                }}</v-icon>
<!--              <svg-icon v-bind="attrs" :icon-class="navItem.icon" v-on="on" class="mr-6"/>-->
              <span>{{ navItem.title }}</span>
            </template>
            <span>{{ navItem.title }}</span>
          </v-tooltip>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-main class="mb-16 pb-16 mx-md-10 mx-3">
      <v-container fluid>
        <router-view />
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import mixin from "../../mixins/mixins";

export default {
  name: "AppLayout",
  mixins: [mixin],
  data: ()=>({
    drawer: true,
    miniDrawer: false,
    navItems: [
      {
        title: "主页",
        icon: "$home",
        link: "/home",
      },
      {
        title: "题库",
        icon: "$library",
        link: "/library",
      },
      {
        title: "数据仪表盘",
        icon: "$listen",
        link: "/dash1",
      },
      {
        title: "作文助手",
        icon: "$music",
        link: "/dash3",
      },
      {
        title: "翻译助手",
        icon: "$dotchart",
        link: "/dash5",
      },
      {
        title: "背单词神器",
        icon: "$library",
        link: "/dash2",
      },
      {
        title: "AI英语助教",
        icon: "$dotchart",
        link: "/dash4",
      },
      {
        title: "设置",
        icon: "$settings",
        link: "/settings",
      },

    ],
  }),
  mounted() {

  },
  methods: {
    drawerMenuClick() {
      if (this.screenIsSmall) {
        this.miniDrawer = false;
        this.drawer = !this.drawer;
      } else {
        this.miniDrawer = !this.miniDrawer;
      }
    },
    logout() {
      console.log('注销');

      // ✅ 清除 Vuex 状态
      this.$store.dispatch('clearAnalysisData');
      this.$store.commit('setUid', null);
      this.$store.commit('setUserInfo', {
        username: '',
        id: null,
        avatar: ''
      });

      // ✅ 清除 localStorage 数据
      localStorage.removeItem('uid');
      localStorage.removeItem('username');
      localStorage.removeItem('avatar');

      // ✅ 跳转到登录页面
      this.$router.push('/');

      // ✅ 提示消息
      this.$snackbar({ content: '已退出登录', top: true, center: true, color: 'blue', multiLine: true });
    },
  }
}
</script>

<style>
svg {
  fill: currentColor;
}
path {
  fill: currentColor;
}
#app {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
.active-nav-link {
  color: #1ed760 !important;
}
.d-hidden {
  opacity: 0;
}
</style>
